<template>
  <div class="dmform dmform-right" v-loading="loading">
    <a-tabs default-active-key="1" style="margin:0 10px;" :animated="false">
      <a-tab-pane key="1" tab="字典信息">
        <div class="dmform-groups">
          <a-form-model ref="form" :model="formData" :rules="formRules"
                        :label-col="formLabelCol" :wrapper-col="formWrapperCol">
            <div class="dmform-group dmform-group-scroll" :style="{maxHeight:pageHeight-95+'px'}">
              <a-form-model-item label="所属分类">
                <a-input :value="formData.parentName" disabled />
              </a-form-model-item>
              <a-form-model-item prop="name" has-feedback label="字典名称"
                                 help="字典中文名称，命名规则为【数据表中文名简称 + 字段中文名简称】。如：人员性别——即表示该字典用于【人员】数据表的【性别】字段。">
                <a-input v-model="formData.name" v-focus />
              </a-form-model-item>
              <a-form-model-item prop="type" has-feedback label="字典编码"
                                 help="在程序代码中关联查询字典项中文名称时会用到字典编码，命名规则为【数据表英文名后缀大写 + 下划线 + 字段英文名大写】。如：USER_SEX——来自人员表(sys_user)和性别字段(sex)。">
                <a-input v-model="formData.type" :disabled="!(!pageParams.id)"/>
              </a-form-model-item>
              <a-form-model-item label="字典选项"
                                 help="字典由若干个选项组成，如：【人员性别】字典选项包括【男、女】。">
                <DicItemsEditor v-model="formData.items" is-remote
                                @onAdd="doAddItem" @onRemove="doRemoveItem" />
              </a-form-model-item>
            </div>
          </a-form-model>
        </div>
        <div class="dmform-bottom">
          <a-button @click="doSubmit" type="primary" :loading="submitting">{{ saveButtonText }}</a-button>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import DataFormUtils from '@/utils/DataFormUtils'

import DicItemsEditor from "./ItemsEditor";

export default {
  mixins: [DataFormUtils],
  components: {DicItemsEditor},
  data() {
    return {
      loadUrl: '/jsofted/dic/get/',
      addUrl: '/jsofted/dic/add',
      updateUrl: '/jsofted/dic/update/',
      deleteUrl: '/jsofted/dic/delete/',
      defaultValues: {
        category: 'dic',
        items: null,
      },
      formData: { // 前端表单数据
        id: '',
        parentId: '',
        parentName: '',
        name: '',
        type: '',
        category: '',
        isEditable: '',
        isDeletable: '',
        items: null,
      },
      formRules: {
        name: [
          { required: true, message: '不能为空！', trigger: 'change' },
          { min: 2, max: 30, message: '长度为2-30个汉字！', trigger: 'change' },
        ],
        type: [
          { required: true, message: '不能为空！', trigger: 'change' },
          { min: 2, max: 30, message: '长度为2-30个字母和下划线！', trigger: 'change' },
        ],
      },
    }
  },
  methods: {
    doAddItem(item) {
      if (!this.formData.id) {
        if (this._validateForm()) {
          this._addDic(() => {
            this._addItem(item)
          })
        } else {
          this.$message.error('添加字典项失败，请先正确填写主表单中的相关字段！')
        }
      } else {
        this._addItem(item)
      }
    },
    _addDic(callback) {
      this.$http.post(this.addUrl, this.formData).then((rs) => {
        const result = rs.data
        if (result.success) {
          this.initFormData(result.data)
          this.pageParams.id = result.data.id
          this.doSuccess(result.data)
          //
          callback()
        } else {
          this.$message.error(result.message)
        }
      })
    },
    _addItem(item) {
      if (!this.formData.items) {
        this.formData.items = []
      }
      item.parentId = this.formData.id
      item.type = this.formData.type
      item.category = 'item'
      item.isDeleted = 0
      //
      this.$http.post(this.addUrl, item).then((rs) => {
        const result = rs.data
        if (result.success) {
          this.$message.success(result.message);
          this.doSuccess(result.data)
          //
          this.formData.items.push(result.data)
        } else {
          this.$message.error(result.message)
        }
      })
    },
    doRemoveItem(index) {
      const items = this.formData.items
      const item = items[index]
      this.$http.get(this.deleteUrl + item.id).then((rs) => {
        const result = rs.data
        if (result.success) {
          this.$message.success(result.message);
          this.doSuccess(this.formData)
          //
          items.splice(index, 1);
        } else {
          this.$message.error(result.message)
        }
      })
    }
  }
}
</script>
